<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
    <meta name="description" content="{{ site.description }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --text-color: #333;
            --bg-color: #fff;
            --link-color: #0366d6;
            --border-color: #eee;
            --code-bg: #f6f8fa;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif;
            line-height: 1.8;
            color: var(--text-color);
            background: var(--bg-color);
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        header {
            margin-bottom: 3rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        header h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }
        header h1 a {
            color: var(--text-color);
            text-decoration: none;
        }
        header p {
            color: #666;
            font-size: 0.9rem;
            margin-top: 0.25rem;
        }
        nav {
            margin-top: 0.5rem;
        }
        nav a {
            margin-right: 1rem;
            color: var(--link-color);
            text-decoration: none;
            font-size: 0.9rem;
        }
        nav a:hover {
            text-decoration: underline;
        }
        main {
            min-height: 60vh;
        }
        footer {
            margin-top: 3rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
            font-size: 0.85rem;
            color: #666;
        }
        a {
            color: var(--link-color);
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        h1, h2, h3, h4, h5, h6 {
            margin: 1.5rem 0 0.5rem;
            font-weight: 600;
            line-height: 1.3;
        }
        h1 { font-size: 1.8rem; }
        h2 { font-size: 1.4rem; }
        h3 { font-size: 1.2rem; }
        p {
            margin: 0.8rem 0;
        }
        ul, ol {
            margin: 0.8rem 0;
            padding-left: 1.5rem;
        }
        li {
            margin: 0.3rem 0;
        }
        code {
            background: var(--code-bg);
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
            font-size: 0.9em;
            font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
        }
        pre {
            background: var(--code-bg);
            padding: 1rem;
            border-radius: 5px;
            overflow-x: auto;
            margin: 1rem 0;
        }
        pre code {
            background: none;
            padding: 0;
        }
        blockquote {
            border-left: 3px solid var(--border-color);
            padding-left: 1rem;
            margin: 1rem 0;
            color: #666;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
        }
        th, td {
            border: 1px solid var(--border-color);
            padding: 0.5rem;
            text-align: left;
        }
        th {
            background: var(--code-bg);
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .post-meta {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        .post-list {
            list-style: none;
            padding: 0;
        }
        .post-list li {
            padding: 0.8rem 0;
            border-bottom: 1px solid var(--border-color);
        }
        .post-list li:last-child {
            border-bottom: none;
        }
        .post-list a {
            font-weight: 500;
        }
        .category-section {
            margin: 2rem 0;
        }
        .category-section h2 {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5rem;
        }
        @media (max-width: 600px) {
            body {
                padding: 1rem;
            }
            h1 { font-size: 1.5rem; }
            h2 { font-size: 1.2rem; }
        }
    </style>
</head>
<body>
    <header>
        <h1><a href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
        <p>{{ site.description }}</p>
        <nav>
            <a href="{{ '/' | relative_url }}">首页</a>
            <a href="{{ '/about' | relative_url }}">关于</a>
            <a href="https://space.bilibili.com/161342702" target="_blank">B站</a>
            <a href="https://github.com/znlgis" target="_blank">GitHub</a>
        </nav>
    </header>
    <main>
        {{ content }}
    </main>
    <footer>
        <p>&copy; {{ site.time | date: '%Y' }} {{ site.author }}. 使用 <a href="https://pages.github.com/" target="_blank">GitHub Pages</a> 托管.</p>
    </footer>
</body>
</html>
